<!DOCTYPE html>
<html lang="zh - CN">

<head>
    <meta charset="UTF-8">
    <title>简易手机通讯录</title>
    <style>
        form {
            margin-bottom: 10px;
        }

        label {
            display: inline - block;
            width: 80px;
            margin - right: 5px;
        }

        button {
            margin - right: 5px;
        }

        textarea {
            width: 200px;
            height: 100px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <h3>手机通讯录管理器</h3>
    <form>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required><br>
        <label for="phone">电话：</label>
        <input type="text" id="phone" name="phone" required><br>
        <button type="button" id="addButton">添加</button>
        <button type="button" id="queryButton">查询</button>
        <button type="button" id="deleteButton">删除</button>
        <button type="button" id="resetButton">重置</button>
    </form>
    <textarea id="contactList"></textarea>
    <script>
        // 从本地存储中获取通讯录数据，如果没有则初始化为空对象
        let phoneBook = JSON.parse(localStorage.getItem('phoneBook')) || {};
        // 加载页面时显示已有的通讯录
        displayContactList();

        // 添加功能
        $('#addButton').on('click', function () {
            let name = $('#name').val();
            let phone = $('#phone').val();
            if (name && phone) {
                phoneBook[name] = phone;
                localStorage.setItem('phoneBook', JSON.stringify(phoneBook));
                displayContactList();
                alert('添加成功');
            } else {
                alert('姓名和电话不能为空');
            }
        });

        // 查询功能
        $('#queryButton').on('click', function () {
            let name = $('#name').val();
            if (name) {
                let phone = phoneBook[name];
                if (phone) {
                    $('#phone').val(phone);
                } else {
                    alert('未找到该联系人');
                }
            } else {
                alert('请输入姓名进行查询');
            }
        });

        // 删除功能
        $('#deleteButton').on('click', function () {
            let name = $('#name').val();
            if (name && phoneBook[name]) {
                delete phoneBook[name];
                localStorage.setItem('phoneBook', JSON.stringify(phoneBook));
                displayContactList();
                alert('删除成功');
            } else {
                alert('请输入正确的姓名进行删除');
            }
        });

        // 重置功能
        $('#resetButton').on('click', function () {
            $('#name').val('');
            $('#phone').val('');
        });

        function displayContactList() {
            let list = '';
            for (let name in phoneBook) {
                list += name +'---'+ phoneBook[name] + '\n';
            }
            $('#contactList').val(list);
        }
    </script>
</body>

</html>